<template>
  <div class="home">
    <el-card class="box-card">
      <div class="userinfo">
        <div class="avatar">
          <img :src="userStore.avatar" alt="">
        </div>
        <div class="role">
          <div class="welcome">{{ userStore.username }}</div>
          <div class="project">{{ welcome }}---{{ projectName }}</div>
        </div>
      </div>
    </el-card>
    <!-- <div class="spinner-border">
      <div class="qqq">111</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import { useUserStore } from '@/store/modules/user';
import { getTime } from '@/utils/time';
let userStore = useUserStore();
let projectName = ref(import.meta.env.VITE_APP_TITLE);

const welcome = computed(() => {
  return getTime();
})
onMounted(() => {
  // userStore.userInfo();
})
</script>
<style lang="scss" scoped>
.home {
  .box-card {
    margin-top: 1%;

    .userinfo {
      display: flex;
      align-items: center;

      .avatar {
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .role {
        margin-left: 2%;
        line-height: 30px;

        .welcome {
          font-size: 26px;
          font-weight: 600;
        }

        .project {
          color: #74a6b6;
        }
      }
    }
  }

  .spinner-border {
    // display: inline-block;
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3bf5c0;
    border-bottom-color: #3bf5c0;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spinner-border-spin 2s linear infinite;
  }

  @keyframes spinner-border-spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .qqq {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rond2 2s linear infinite;
  }

  @keyframes rond2 {
    0% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }


}</style>
